<template>
    <div class="card comment">
        <div class="card_title">
            <p class="card_title_name">评论{{ count }}</p>
        </div>
        <yk-scrollbar ref="scrollbar" :height="height">
            <yk-space dir="vertical">
                <div></div>
                <Reply v-for="item in comments" :key="item.id" :content="item" :isComment="true" 
                @toRead="changetoRead"
                    @delete="deleteComment" />
            </yk-space>
        </yk-scrollbar>
        <div class="comment_pagination">
            <yk-pagination fix-width :total="count" size="m" @change="changePage" :default-page-size="props.pageSize"/>
        </div>
    </div>
</template>
<script setup lang="ts">
import Reply from "./Reply.vue"
import { ref, onMounted, getCurrentInstance } from 'vue';
// import { comment } from "../../mock/data"
import type { CommentProps } from "./reply";
import { getCommentApi,updateCommentStateApi,deleteCommentApi } from "../../api/comment_api";
import { useUserStore } from "../../stores/user";
import { useCode } from "../../hooks/codeHook";


const { tackleCode } = useCode();
const userStore = useUserStore();


const proxy: any = getCurrentInstance()?.proxy;//获取消息框实例
const props = withDefaults(defineProps<CommentProps>(), {
    pageSize: 4,
    height: "494.812px",
})


//评论总数
const count = ref<number>()
//数据内容
const comments = ref();
//请求
type Request = {
    token?: string,
    pageSize: number,//每页多少条数据
    nowPage: number,//当前页码
    count?: boolean,
}

const request: Request = {
    pageSize: props.pageSize,
    nowPage: 1,
    token: userStore.token,
}

//获取数据
const drwCommentData = (e: boolean) => {
    //mock数据
    // let data = comment
    request.count = e;
    getCommentApi(request).then((res: any) => {
        if (tackleCode(res.data.code)) {
            let data = res.data.data;
            if(data.count!==-1){
            count.value = data.count; //总条数
            }
            comments.value = data.result;
            console.log(comments.value);
        }
    })

}

//翻页
const changePage = (page: number) => {
    request.nowPage = page;
    drwCommentData(false);
}

//删除评论
const deleteComment = (id: number) => {
    let request = {
        token: userStore.token,
        id: id,
    }
    deleteCommentApi(request).then((res: any) => {
        if (tackleCode(res.data.code)) {
            comments.value = comments.value.filter((item: any) => item.id !== id)
            drwCommentData(true)
            proxy.$message({ type: "success", message: "删除评论成功" })
        }
    })
 
}

//状态改变为已读
const changetoRead = (id: number) => {
    let request = {
        token: userStore.token,
        id: id,
    }
    updateCommentStateApi(request).then((res: any) => {
     
        if (tackleCode(res.data.code)) {
          //处理前端的已读
          comments.value.find((item: any) => item.id === id).isread = 1;
        }
        else {
            proxy.$message({ type: "error", message: "状态改变失败" })
        }
    })
}

onMounted(() => {
    drwCommentData(true)
})

</script>
<style scoped lang="less">
.comment {
    box-sizing: border-box;
    ;

    &_pagination {
        padding: @space-xl @space-l 0 @space-l ;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        border-top: 1px solid @line-color-s;
        width: 100%;
    }
}

.card_title_name {
    line-height: 25px;
}
</style>